<template>
    <div style="width: 100%;margin: 10px auto;">
        <div class="operation" >
            <el-row type="flex" class="row-bg" justify="start">
                <el-input placeholder="请输入科室名" prefix-icon="el-icon-search" clearable @clear="initData" style="width: 450px;margin-right: 10px" v-model="keyword" @keydown.enter.native="search"></el-input>
                <el-button icon="el-icon-search" type="primary" @click="search">
                    搜索
                </el-button>
                <el-col >
                    <el-button type="primary" icon="el-icon-plus"  @click="addDepAction">
                    添加科室</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                :header-cell-style="{background:'#c3e0cd',color:'#606266'}"
                :fit="true"
            :data="department"
            border
            style="margin: 15px">
            <el-table-column
                    type="selection"
                    >
            </el-table-column>
        <el-table-column
                fixed
                prop="name"
                label="科室"
                min-width="80">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                min-width="80">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话"
                min-width="100">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                min-width="170">
            <template slot-scope="scope">
                <el-button @click="deleteClick(scope.row)" type="danger" round size="small">删除</el-button>
                <el-button @click="editData(scope.row)" type="primary" round size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" :rules="rules">
                <el-form-item label="科室名称" :label-width="formLabelWidth" prop="name" >
                    <el-input v-model="form.name" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="科室地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室电话" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="pushData">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%">
            <el-form :model="form">
                <el-form-item label="科室名称" :label-width="formLabelWidth"  >
                    <el-input v-model="form.name" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="科室地址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="科室电话" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button type="primary" @click="pushEditData">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import MY from "../../global_variable";
    export default {
        name: "Department",
        data() {
            return {
                keyword:'',
                department: [],
                dialogVisible: false,
                editDialogVisible:false,
                form: {
                    name: '',
                    address: '',
                    phone: '',
                },
                formLabelWidth: '120px',
                rules: {
                    name: [
                        {required: true, message: '请输入科室名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20个字符', trigger: 'blur'}
                    ],
                },
                total:0,
                currentPage:1,
                pageSize:5,
                departments:[]

            }
        },
                mounted() {
                    this.initData()
                },
                methods:{
                    handleSizeChange: function (size) {
                        this.pageSize = size;
                        console.log(this.pageSize)  //每页下拉显示数据
                        if(this.keyword!=''){
                            this.search()
                        }else{
                            this.pageRequest(1,this.pageSize)
                        }

                    },
                    handleCurrentChange: function(currentPage){

                        this.currentPage = currentPage;
                        if(this.keyword!=''){
                            this.search()
                        }else{
                            this.pageRequest(currentPage,this.pageSize)
                        }
                        console.log(this.currentPage)  //点击第几页
                    },
                    pageRequest(start,size){
                        var pn={
                            pageNum:start,
                            pageSize:size
                        }
                        this.getRequest(MY.myURL+'/department/getDepartmentsByPage',pn).then(resp=>{
                            console.log('分页')
                            console.log(resp)
                            if(resp){
                                this.department=resp.data.data.records
                                this.total=resp.data.data.total
                            }
                        })

                    },
                    search(){
                        var pn={
                            name:this.keyword
                        }
                        this.getRequest(MY.myURL+'/department/fuzzyQueryByDepartmentName',pn).then(resp=>{
                            console.log(resp)
                            if(resp.data.code=='4010'){
                                this.departments=resp.data.data
                                this.total=this.departments.length

                                let begin=0
                                let end=0
                                if(Math.ceil(this.total/this.pageSize)<this.currentPage){
                                    begin=0
                                    end=this.pageSize
                                    this.currentPage=1
                                }else{
                                    begin=(this.currentPage-1)*this.pageSize
                                    end=(this.currentPage*this.pageSize)
                                }
                                this.department=this.departments.slice(begin,end)
                            }
                        })
                    },
                    editData(row){
                        this.editDialogVisible=true
                        this.initForm(row)

                    },
                    pushEditData(){
                        this.getRequest(MY.myURL+'/department/updateOneDepartment',this.form).then(resp=>{
                            if(resp.data.code=='4009'){
                                this.$message({
                                    message: resp.data.message,
                                    type: 'success'
                                });
                                this.clearForm()
                               //this.refreshData()
                                if(this.department==1){
                                    this.pageRequest(this.currentPage-1,this.pageSize)
                                    this.currentPage-=1
                                }else{
                                    this.pageRequest(this.currentPage,this.pageSize)
                                }
                            }else{
                                this.$message.error(resp.data.message);
                                this.editDialogVisible=false
                            }
                        })
                    },
                    addDepAction() {
                        this.dialogVisible = true
                    },
                    pushData(){
                    console.log(this.form)
                     this.getRequest(MY.myURL+'/department/isExist/',{name:this.form.name}).then(resp=>{
                         console.log(resp)
                         if(resp.data.name==this.form.name){
                             this.$message({
                                 message: '科室: '+this.form.name+'已经存在',
                                        type: 'warning'
                                    });
                         }else{
                             this.getRequest(MY.myURL+'/department/insertOneDepartment',this.form).then(resp=>{
                                 if(resp.data.code=='4001'){
                                     this.$message({
                                         message: resp.data.message,
                                         type: 'success'
                                     });
                                    this.clearForm()
                                    this.dialogVisible=false
                                    //this.refreshData()
                                     if(this.keyword!=''){
                                         this.search();
                                     }else{
                                         this.pageRequest(Math.ceil((this.total+1)/this.pageSize),this.pageSize)
                                         this.currentPage=Math.ceil((this.total+1)/this.pageSize)
                                     }
                                 }
                         })

                         }

                     })
                    },
                    deleteClick(row) {
                        console.log(row.name)
                        var path = MY.myURL + '/department/deleteOneDepartmentByName/'
                        this.$confirm('此操作将永久删除科室名为 '+row.name+'的数据, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            var pn={
                                name:row.name
                            }
                            this.getRequest(path,pn).then(resp => {
                                console.log(2)
                                console.log(resp)
                                console.log(2)
                                if (resp.data.code == '4005') {
                                    console.log(3)
                                    this.$message({
                                        type: 'success',
                                        message: resp.data.message
                                    });
                                    console.log(3)
                                    //this.refreshData()
                                    if(this.department==1){
                                        this.pageRequest(this.currentPage-1,this.pageSize)
                                        this.currentPage-=1
                                    }else{
                                        this.pageRequest(this.currentPage,this.pageSize)
                                    }
                                } else {
                                    this.$message({
                                        type: 'error',
                                        message: "该科室已有医生或病房关联，暂不能删除"
                                    });
                                }
                            })

                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                                })
                            })
                    },
                    refreshData(){
                      this.initData()
                    },
                    initData(){
                        this.pageRequest(1,5)
                    },
                    initForm(row){
                        this.form.name=row.name
                        this.form.phone=row.phone
                        this.form.address=row.address
                        this.editDialogVisible=true
                    },
                    clearForm(){
                        this.form.name=''
                        this.form.phone=''
                        this.form.address=''
                        this.editDialogVisible=false

                    }
        }
    }
</script>

<style scoped>

</style>
